
 <template slot-scope="scope">
 <van-form >
   <van-tabs v-model="active" swipeable @click='clickId'>
        <van-tab title="全部">
            <van-list>
    <van-cell v-for="item in showTitle.message"  v-lazy="item.img_url" :key="item.id">
       <van-image
        @click='gotoMenu(item.id)'
         width="100%"
         height="300"
         radius='20px'
         lazy-load
         overflow: hidden
         :src="item.img_url"
         />
         <!-- : -->
          <div class='abb' > {{item.seo_keywords}} <h6>  {{item.seo_description}}</h6></div>
       </van-cell>
    </van-list>
         </van-tab>
         <!-- 以下是全部列表 -->
          <van-tab v-for="item in getPhotos" :key="item.id" :title="item.title">
            <van-list>
              <van-cell  v-for="item in showTitle.message" :key="item.id">
                        <van-image
                        @click='gotoMenu(item.id)'
                          width="100%"
                          height="300"
                          radius='20px'
                          lazy-load
                          overflow: hidden
                          :src="item.img_url"/>
                  <div class='abb' > {{item.seo_keywords}} <h6>  {{item.seo_description}}</h6></div>
             </van-cell>
              </van-list>
          </van-tab>
   </van-tabs>
   <van-tabs>
   </van-tabs>
 </van-form>
</template>

<script>

export default {
  data () {
    return {
      active: 1,
      getPhotos: [],
      showTitle: [],
      loading: false,
      finished: false,
      cateId: 0
    }
  },

  created () {
    this.getSwiper()
    this.getTitle()
  },

  methods: {
    async getSwiper () {
      const { data: res } = await this.$axios.get(
        '/api/getimgcategory'
      )
      // console.log(res)
      this.getPhotos = res.message
    },
    async getTitle () {
      const { data: res } = await this.$axios.get(
        `/api/getimages/${this.cateId}`
      )
      console.log(res)
      this.showTitle = res
    },
    async clickId (name, title) {
      // Toast(title)
      // console.log(title)
      var i = await this.getPhotos.filter(item => item.title === title)
      console.log(i)
      var b = (i.length === 0 ? 0 : i[0].id)
      this.cateId = b
      // console.log(this.cateId)
      // 差点忘了重新发送一次请求
      this.getTitle()
    },
    gotoMenu (id) {
      this.$router.push(`/Photo/Info/${id}`)
    }
  }
}
</script>

<style scoped lang='less'>
.header {
  width: 100%;
  height: 40px;
  background: #1989fa;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
}
.abb{
  padding-top:20px;
  padding-left: 20px;
  height: 25%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  position:absolute;
  bottom:8px;
  border-radius: 0 0 20px 20px;
}
</style>
